<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<form>
			<label for="">用户名:<input type="text" name="username" id="username"></label><span id="info"></span><br>
			<label for="">密 码::<input type="password" name="password" id="password"></label><br>
			<input type="button" value="登录" id="login" />
		</form>
		<script>
			window.onload = function() {
				var username = document.querySelector("#username");
				var pw = document.querySelector("#password");
				var info = document.querySelector("#info");
				var btn = document.querySelector("#login");
				btn.onclick = function() {
					//1.创建XMLHttpRequest 
					var x = new XMLHttpRequest();
					//2.准备发送:
					x.open('get', 'get.php?username=' + username.value + "&password=" + pw.value);
					//3.发送:
					x.send(null);
					//4.服务器响应并返回信息:
					x.onreadystatechange = function() {
						if(x.readyState == 4 && x.status == 200) {
							if(x.responseText == "1") {
								info.innerHTML = "登录成功";

							} else {
								info.innerHTML = "您的输入有误,请重新输入"

							}
							setTimeout(function() {
								username.value = "";
								pw.value = "";
							}, 500)
						}
					}
				}
			}
		</script>
	</body>

</html>